<script setup>
import {ref, watch} from "vue"
import colors from "../Data/colors.js"
import {getText1} from "../Data/elements.js"

const props = defineProps({
    elem: {
        type: Object,
        default: () => {
            return {
                styleConfig: {},
                children: []
            }
        }
    }
})
const formType = ref("style")
const edit = ref(false)
/**
 * 添加数据
 */
const addData = () => {
    props.elem.children.push(getText1(props.elem.rowIndex, props.elem.columnIndex, true))
}
/**
 * 当表格fontSize 样式发生变化，批量设置 单元格样式
 */
watch(() => props.elem.styleConfig.fontSize, (val) => {
    props.elem.children.map((cell) => {
        cell.styleConfig.fontSize = val
    })
})
/**
 * 当表格fontWeight 样式发生变化，批量设置 单元格样式
 */
watch(() => props.elem.styleConfig.fontWeight, (val) => {
    props.elem.children.map((cell) => {
        cell.styleConfig.fontWeight = val
    })
})
/**
 * 当表格color 样式发生变化，批量设置 单元格样式
 */
watch(() => props.elem.styleConfig.color, (val) => {
    props.elem.children.map((cell) => {
        cell.styleConfig.color = val
    })
})
</script>

<template>
    <div class="TableColumn1 print-template-element-form-container ">
        <el-radio-group v-model="formType" size="small">
            <el-radio-button value="style">样式</el-radio-button>
            <!--            <el-radio-button value="data">数据</el-radio-button>-->
        </el-radio-group>
        <el-divider style="margin: 10px 0"></el-divider>
        <!--样式表单-->
        <el-form v-if="formType==='style'" :model="elem.styleConfig" class="form" label-position="left" label-width="auto" size="small">
            <div class="node-name" @dblclick="edit = true">
                <el-input v-if="edit" v-model="elem.name" autofocus @blur="edit = false" @keydown="e => e.code === 'Enter' ? edit = false : ''" />
                <span v-else style="font-size: 20px">{{ elem.name }}</span>
            </div>
            <el-form-item label="文字大小">
                <el-select v-model="elem.styleConfig.fontSize" filterable style="width: 100%">
                    <el-option v-for="i in 30" :key="i" :value="(10+i) + 'px'">{{ 10 + i }}px</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="文字颜色">
                <el-color-picker v-model="elem.styleConfig.color" :predefine="colors" show-alpha />
            </el-form-item>
            <el-form-item label="字体粗细">
                <el-radio-group v-model="elem.styleConfig.fontWeight">
                    <el-radio value="normal">普通</el-radio>
                    <el-radio value="bold">粗体</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="对齐方式">
                <el-select v-model="elem.styleConfig.textAlign" filterable style="width: 100%">
                    <el-option label="左对齐" value="left" />
                    <el-option label="居中对齐" value="center" />
                    <el-option label="右对齐" value="right" />
                </el-select>
            </el-form-item>
            <el-form-item label="宽度">
                <el-input v-model="elem.styleConfig.width" />
            </el-form-item>
            <el-form-item label="是否是合并列">
                <el-radio-group v-model="elem.isMerge">
                    <el-radio :value="true">是</el-radio>
                    <el-radio :value="false">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="操作">
                <el-button plain type="primary" @click="addData">添加数据</el-button>
            </el-form-item>
            <FCssStyle :css-style="elem.styleConfig" @use="sty => elem.styleConfig = sty"/>
        </el-form>
    </div>
</template>

<style lang="scss" scoped>

</style>